<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
    }
    a{
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
    /* 头部 */
    .tou{
        height: 80px;
        width: 1000px;
        margin: 0 auto;
        position: absolute;
        left: 0;
        right: 0;
        z-index: 2;
    }
    .oppoz{
        font-size: 30px;
        margin-right: 100px;
        color: rgb(128, 128, 128);
    }
    .tou .tou-item{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .tou-item li a {
            display: block;
            cursor: pointer;
            /* opacity: .56; */
            color: rgb(128, 128, 128);
            /* z-index: 9; */
        }
    .tou-item li a:hover {
           color: black;
           /* opacity: 1; */
        }
    /* 轮播图 */
    .lunbtu{
        position: relative;
        overflow: hidden;
    }
    .lunbtu-item{
        width: 100%;
        height: 500px;
        float: left;
    }
   .lunbtu img{
       width: 100%;
       height: 100%;
    }
   .lunbtu .yuan{
       position: absolute;
       text-align: center;
       bottom: 15px;
       left: 0;
       right: 0;
   }
   .lunbtu .yuan i{
       display: inline-block;
       width: 8px;
       height: 8px;
       border-radius: 50%;
       background-color: white;
       margin: 0 12px;
       cursor: pointer;
   }
   /* 更多新品 */
   .gdxpin-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin-top:100px;
    margin: auto;
    height: 200px;
    /* line-height: 200px; */
   }
   .gdxpin-item .gdxp{
    font-size: 50px;
   }
   .gdxpin-item .faxian{
      text-decoration:underline;
   }
   /* tp */
   .gdxpin-img{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 800px;
   }
   .gdxpin-img .img-left{
    width: 881px;
    height: 800px;
    overflow: hidden;
   }
   .gdxpin-img .img-left1{
    width: 440px;
    height: 800px;
    overflow: hidden;
   }
   .gdxpin-img .img-right1{
    width: 881px;
    height: 800px;
    overflow: hidden;
    margin-left: 50px;
   }
   .gdxpin-img .img-right{
    width: 440px;
    height: 800px;
    overflow: hidden;
    margin-left: 50px;
   }
   .gdxpin-img img{
    width: 100%;
    transform: scale(1.1);
    transition: transform .3s linear;
    display: block;
   }
   .gdxpin-img img:hover{
    transform: scale(1);
   }
   .gdxpin-img .title{
     margin-top: 40px;
   }
   .gdxpin-img .title a{
    font-size: 20px;
   }
   .gdxpin-img .title .tag{
    margin-left: 20px;
    color: rgb(36, 190, 36);
   }
   .gdxpin-img .desc{
    font-size: 14px;
    margin-top: 10px;
   }
   .gdxpin-img .cart-price{
    margin-top: 14px;
   }
   .gdxpin-img .butt{
      width: 240px;
      height: 50px;
   }
   .gdxpin-img .butt .ljgd{
    line-height: 50px;
    background-color: black;
    color: white;
   }
   .gdxpin-img .butt .buy{
    text-decoration:underline;
    margin-left: 10px;
   }
   /* 智能硬件 */
   .znyjian{
    background-color: rgb(230, 230, 230);
    display: flex;
    justify-content: center;
   }
   .znyjian .img-left2{
    width: 676px;
    height: 800px;
    overflow: hidden;
   }
   .znyjian .img-right2{
    width: 338px;
    height: 800px;
    overflow: hidden;
   }
   .znyjian img{
    width: 100%;
    transform: scale(1.1);
    transition: transform .3s linear;
    display: block;
   }
   .znyjian img:hover{
    transform: scale(1);
   }
   .znyjian .title{
     margin-top: 40px;
   }
   .znyjian .title a{
    font-size: 20px;
   }
   .znyjian .title .tag{
    margin-left: 20px;
    color: rgb(36, 190, 36);
   }
   .znyjian .desc{
    font-size: 14px;
    margin-top: 10px;
   }
   .znyjian .cart-price{
    margin-top: 14px;
   }
   .znyjian .butt{
      width: 240px;
      height: 50px;
   }
   .znyjian .butt .ljgd{
    line-height: 50px;
    background-color: black;
    color: white;
   }
   .znyjian .butt .buy{
    text-decoration:underline;
    margin-left: 10px;
   }
   /* 探索OPPO */
   /* .disabled-item{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid black;
    line-height: 50px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    /* margin-left: 10px; */
   /* }
   .disabled-item:active{
    border: 1px solid gray; 
   }
   */
   
   .cp-discover {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 36px;
            margin-right: 10px;
        }
   .cp-discover-title {
            font-size: 36px;
        }
   .swiper-container {
        white-space: nowrap;
        font-size: 0;
        transition: transform .3s linear;
    }

    .cp-discover-btns>a {
            display: inline-block;
            box-sizing: border-box;
            width: 36.6px;
            font-size: 20px;
            margin: 0 12px;
        }

        .cp-discover-btns>a.disabled {
            opacity: .56;
            cursor: not-allowed;
        }

        .cp-discover-btns>a:last-child {
            margin: 0;
        }
    .swiper-container .item {
        display: inline-block;
        margin-right: 20px;
        width: 424px;
        height: 282px;
        box-sizing: border-box;
        cursor: pointer;
    }

    .swiper-container .item video {
        width: 100%;
    }

    .swiper-container .img-box {
        position: relative;
        overflow: hidden;
    }

    .swiper-container .video img {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 9;
    }

    .swiper-container .item img {
        width: 100%;
        transform: scale(1.1);
    }

    .swiper-container .video img {
        transition: opacity .3s linear;
    }

    .swiper-container .item .video-box {
        opacity: 0;
        transition: opacity .3s linear;
    }

    .discover-title {
        font-variation-settings: 'wght'750;
        font-size: 20px;
        line-height: 30px;
        padding: 8px 0;
    }

    .discover-intro {
        font-size: 14px;
        line-height: 24px;
        word-wrap: break-word;
    }
    .swiper-container{
        overflow: hidden;
        height: 500px;
    }
    .swiper-container .item .learn-more {
        display: inline-block;
        padding-top: 8px;
        height: 24px;
        border-bottom: 1px solid #000;
    }

    .swiper-container .item .learn-more a {
        font-size: 14px;
        font-weight: 400;
    }

    /* 探索-图片的相关行为 */
    .swiper-container .img img {
        transition: transform .3s linear;
    }

    .swiper-container .img img:hover {
        transform: scale(1);
    }
    /* 底部*/
    .dibu{
        margin-top: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center ;
        
    }
    .dibu-size{
        font-size: 15px;
        color: gray;
    }
</style>
<body> 
    <!-- 头部 -->
    <div class="tou">
       <ul class="tou-item">
        <em class="oppoz">OPPO</em>
          <li>
            <a >手机</a>
          </li>
          <li>
            <a>智能硬件</a>
          </li>
          <li>
            <a>欢太商场</a>
          </li>
          <li>
            <a>关于OPPO</a>
          </li>
          <li>
            <a>ColorOS</a>
          </li>
          <li>
            <a>服务</a>
          </li>
          <li>
            <a>企业业务</a>
          </li>
       </ul>
    </div>
    <!-- 轮播图 -->
    <div class="lunbtu">
         <div class="lunbtu-item">
              <img src="./imgs/1.jpg" alt="">
              <img src="./imgs/2.jpg" alt="">
              <img src="./imgs/3.jpg" alt="">
              <img src="./imgs/1.jpg" alt="">
         </div>
       <div class="yuan">
           <i class="lunbtu-yuan"></i>
           <i></i>
           <i></i>
       </div>
    </div>
    <!-- 更多新品 -->
    <div class="gdxpin">
         <div class="gdxpin-item">
            <p class="gdxp">更多新品</p>
            <p class="faxian"><a href="https://www.oppo.com/cn/smartphones/">查看全部手机</a></p>
         </div>
    </div>
    <div class="gdxpin-img">
        <div class="img-left">
            <a href="#">
                <img src="./imgs/Reno6 pro plus-middlebanner-blue-1600x1068-v2-pc.jpg" alt="">
            </a>
            <div class="title">
                <a href="#">Reno6 Pro+</a>
                <span class="tag">新品</span>
            </div>
            <h3 class="desc">索尼 IMX766 传感器，骁龙 870 芯片</h3>
            <div class="cart-price"><span>3999元起</span></div>
            <div class="butt">
                <a href="#" class="ljgd">了解更多</a>
                <a href="#" class="buy">立即购买</a>
            </div>
        </div>
        <div class="img-right">
            <a href="#">
                <img src="./imgs/Reno6-middlebanner-black-1340x1786-v3-pc.jpg" alt="">
            </a>
            <div class="title">
                <a href="#">Reno6</a>
                <span class="tag">新品</span>
            </div>
            <h3 class="desc">焕采光斑人像视频，65W 超级闪充</h3>
            <div class="cart-price"><span>2799元起</span></div>
            <div class="butt">
                <a href="#" class="ljgd">了解更多</a>
                <a href="#" class="buy">立即购买</a>
            </div>
        </div>
    </div>
    <div class="gdxpin-img">
        <div class="img-left1">
            <a href="#">
                <img src="./imgs/K9-middlebanner-black-1340x1786-v3-pc.jpg" alt="">
            </a>
            <div class="title">
                <a href="#">OPPO K9</a>
                <span class="tag">热销</span>
            </div>
            <h3 class="desc">充电 5 分钟，开黑 2 小时</h3>
            <div class="butt">
                <a href="#" class="ljgd">了解更多</a>
                <a href="#" class="buy">立即购买</a>
            </div>
        </div>
        <div class="img-right1">
            <a href="#">
                <img src="./imgs/Find X3-middlebanner-moka-1600x1068-v2-pc.jpg" alt="">
            </a>
            <div class="title">
                <a href="#">Find X3 系列</a>
                <span class="tag">热销</span>
            </div>
            <h3 class="desc">宇宙摩卡，浪漫上市</h3>
            <div class="butt">
                <a href="#" class="ljgd">了解更多</a>
                <a href="#" class="buy">立即购买</a>
            </div>
        </div>
    </div>
    <!-- 智能硬件 -->
    <div class="gdxpin" style="background-color: rgb(230, 230, 230);">
        <div class="gdxpin-item">
        <p class="gdxp">智能硬件</p>
        <p class="faxian"><a href="https://www.oppo.com/cn/smartphones/">查看全部智能硬件</a></p>
        </div>
    </div>
   <div class="znyjian">
        <div class="img-left2">
            <a href="#">
                <img src="./imgs/TV K9-middlebanner-black-1600x1068-v2-pc.jpg" alt="">
            </a>
            <div class="title">
                <a href="#">OPPO 智能电视 K9</a>
                <span class="tag">新品</span>
            </div>
            <h3 class="desc">十亿色彩，十分出彩</h3>
            <div class="butt">
                <a href="#" class="ljgd">了解更多</a>
                <a href="#" class="buy">立即购买</a>
            </div>
        </div>
        <div class="img-right2">
            <a href="#">
                <img src="./imgs/Enco free2-middlebanner-white-1340x1786-v3-pc.jpg" alt="">
            </a>
            <div class="title">
                <a href="#">OPPO Enco Free2</a>
                <span class="tag">新品</span>
            </div>
            <h3 class="desc">个性化降噪，每一刻都美妙</h3>
            <div class="butt">
                <a href="#" class="ljgd">了解更多</a>
                <a href="#" class="buy">立即购买</a>
            </div>
        </div>
   </div>
   <!-- 探索 OPPO -->
    <div class="gdxpin" style="background-color: rgb(224, 240, 244);">
        <div class="gdxpin-item1">
            <!-- <p class="gdxp">探索OPPO</p> -->
            <!-- <p class="faxian">
                <a href="jaxascript:;" class="disabled">
                    <em class="disabled-item">←</em>
                </a>
                <a href="jaxascript:;" class="disabled">
                    <em class="disabled-item">⇢</em>
                </a>
            </p> -->
            <div class="cp-discover">
                <p class="cp-discover-title">探索 OPPO</p>
                <p class="cp-discover-btns">
                    <a class="disabled" href="javascript:;">
                        <svg width="32" height="33" viewBox="0 0 32 32" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M1.90735e-06 16.5C1.90735e-06 7.71199 7.13059 0.5 16 0.5C24.8694 0.5 32 7.71199 32 16.5C32 25.288 24.8694 32.5 16 32.5C7.13059 32.5 1.90735e-06 25.288 1.90735e-06 16.5ZM30.6383 16.5C30.6383 8.43482 24.0882 1.8617 16 1.8617C7.91176 1.8617 1.3617 8.43482 1.3617 16.5C1.3617 24.5652 7.91176 31.1383 16 31.1383C24.0882 31.1383 30.6383 24.5652 30.6383 16.5ZM12.8377 18.7097C13.1036 18.9756 13.1036 19.4067 12.8377 19.6726C12.5718 19.9385 12.1407 19.9385 11.8748 19.6726L8.66999 16.4677L11.8748 13.2629C12.1407 12.997 12.5718 12.997 12.8377 13.2629C13.1036 13.5288 13.1036 13.9599 12.8377 14.2258L11.2148 15.8486H22.5695C22.9456 15.8486 22.9456 17.2103 22.5695 17.2103H11.3383L12.8377 18.7097Z"
                                fill="black"></path>
                        </svg>
                    </a>
                    <a href="javascript:;">
                        <svg width="32" height="33" viewBox="0 0 32 32" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M32 16.5C32 7.71199 24.8694 0.5 16 0.5C7.13059 0.5 0 7.71199 0 16.5C0 25.288 7.13059 32.5 16 32.5C24.8694 32.5 32 25.288 32 16.5ZM1.3617 16.5C1.3617 8.43482 7.91176 1.8617 16 1.8617C24.0882 1.8617 30.6383 8.43482 30.6383 16.5C30.6383 24.5652 24.0882 31.1383 16 31.1383C7.91176 31.1383 1.3617 24.5652 1.3617 16.5ZM19.1623 18.7097C18.8964 18.9756 18.8964 19.4067 19.1623 19.6726C19.4282 19.9385 19.8593 19.9385 20.1252 19.6726L23.33 16.4677L20.1252 13.2629C19.8593 12.997 19.4282 12.997 19.1623 13.2629C18.8964 13.5288 18.8964 13.9599 19.1623 14.2258L20.7852 15.8486H9.43046C9.05443 15.8486 9.05443 17.2103 9.43046 17.2103H20.6617L19.1623 18.7097Z"
                                fill="black"></path>
                        </svg>
                    </a>
                </p>
            </div>
        </div>
        <div class="swiper-container">
            <div class="item video">
                <div class="img-box">
                    <img alt="Reno 视频同学录大赛 | 前往微博参与" src="./imgs/Reno6-universe-v3-pc.jpg">
                    <div class="video-box">
                        <video preload="auto" autoplay="autoplay" playsinline muted loop="loop"
                            windowlessvideo="true" src="./videos/kv-video-cover-1-v2.mp4"></video>
                    </div>
                </div>
                <p class="discover-title">探索 Reno 系列</p>
                <p class="discover-intro">在我眼里你会发光</p>
                <div class="learn-more">
                    <a href="https://www.oppo.com/cn/smartphones/series-reno/">了解更多</a>
                </div>
            </div>
            <div class="item img">
                <div class="img-box">
                    <img alt="线下体验店 | 查找附近体验店" src="./imgs/discovery-01.jpg">
                </div>
                <p class="discover-title">线下体验店</p>
                <p class="discover-intro">查找附近 OPPO 体验店，了解更多会员权益</p>
                <div class="learn-more">
                    <a href="https://www.oppo.com/cn/offline-stores/">了解更多</a>
                </div>
            </div>
            <div class="item img">
                <div class="img-box">
                    <img alt="O 学堂 | 立即报名摄影课程" src="./imgs/discovery-02.jpg">
                </div>
                <p class="discover-title">O学堂</p>
                <p class="discover-intro">立即报名摄影课程，一起发现生活中的美</p>
                <div class="learn-more">
                    <a href="https://support.oppo.com/cn/oschool-home/">了解更多</a>
                </div>
            </div>
            <div class="item img">
                <div class="img-box">
                    <img alt="会员日 | 参与每月 16～18 日活动" src="./imgs/discovery-03.jpg">
                </div>
                <p class="discover-title">会员日</p>
                <p class="discover-intro">参与每月 16-18 日会员日活动</p>
                <div class="learn-more">
                    <a href="https://support.oppo.com/cn/serviceday/">了解更多</a>
                </div>
            </div>
            <div class="item video">
                <div class="img-box">
                    <img alt="万物互融 | OPPO 随享，美好生活随时分享" src="./imgs/discovery-04.jpg">
                    <div class="video-box">
                        <video preload="auto" autoplay="autoplay" playsinline muted loop="loop"
                            windowlessvideo="true" src="./videos/kv-video-cover-5.mp4"></video>
                    </div>
                </div>
                <p class="discover-title" style="color:#000000;">万物互融</p>
                <p class="discover-intro" style="color:#000000;">OPPO 随享，美好生活随时分享</p>
                <div class="learn-more">
                    <a href="https://www.oppo.com/cn/events/iot/">了解更多</a>
                </div>
            </div>
            <div class="item img">
                <div class="img-box">
                    <img alt="活动 | 留住消失的色彩" src="./imgs/discovery-05.jpg">
                </div>
                <p class="discover-title">留住消失的色彩</p>
                <p class="discover-intro">与国家地理深度合作，致力保护濒危物种</p>
                <div class="learn-more">
                    <a href="https://events.oppo.com/cn/endangered-colour/">了解更多</a>
                </div>
            </div>
        </div>
    </div>
    <div class="dibu">
        <div class="dibu-item">
            <h3>推荐新品</h3>
            <ul class="dibu-size">
                <li>Find X3 系列</li>
                <li> Reno6 系列</li>
                <li> Ace2</li>
                <li>A95</li>
                <li>  K9</li>
                <li>Enco Air</li>
                <li>查看全部手机</li>
                <li>查看全部智能硬件</li>
            </ul>
        </div>
        <div class="dibu-item">
            <h3>购买渠道</h3>
            <ul class="dibu-size">
                <li>线下体验店</li>
                <li>欢太商城</li>
                <li> 官方授权网店</li>
                <li> 欢太商城客户端下载</li>
            </ul>
        </div>
        <div class="dibu-item">
            <h3>探索精彩 OPPO</h3>
            <ul class="dibu-size">
                <li> 关于 OPPO</li>
                <li> 新闻中心</li>
                <li> OPPO 社区</li>
                <li> 加入我们</li>
                <li>  知识产权</li>
                <li> 可持续发展报告</li>
                <li>安全隐私</li>
            </ul>
        </div>
        <div class="dibu-item">
            <h3>商务合作</h3>
            <ul class="dibu-size">
                <li>  企业业务</li>
                <li> 开放平台</li>
                <li> 廉洁合规</li>
                <li>  媒体联络</li>
            </ul>
        </div>
        <div class="dibu-item">
            <h3>服务与支持</h3>
            <ul class="dibu-size">
                <li>  联系我们</li>
                <li>  ColorOS</li>
                <li> 云服务</li>
                <li> 以旧换新</li>
                <li>   服务政策</li>
                <li> 预置软件公示</li>
                <li>安全响应中心</li>
            </ul>
        </div>
    </div>
</body>
<script>
    let timer = null;   //设置滑动
    let index = 0;  //当前滑动的下标
    const lunbotu=document.querySelector(".lunbtu-item");
    const header = document.querySelector('.lunbtu');
    const points = document.querySelectorAll('.yuan .lunbtu-yuan');  //点
    const videoContainer = document.querySelectorAll('.swiper-container .video .img-box');   //视频页面容器
    const moveButtons = document.querySelectorAll('.cp-discover-btns>a');   //移动的按钮
    let moveItemIndex = 0;  //移动的项目下标
    const swiperContainer = document.querySelector('.swiper-container');    //移动的项目盒子
    
    function lun(){
        lunbotu.style.width=(innerWidth*lunbotu.children.length)+"px";
        for (const item of lunbotu.children){
            item.style.width=innerWidth+"px";
        }
    }
    lun();
    window.onresize=lun

     // 滑动
     function lunbo() {
            let distance = -index * innerWidth;  //要滑动的距离
            lunbotu.style.transform = `translateX(${distance}px)`;
            // 判断显示激活哪个点
            points.forEach((item, i) => {
                if (i === index || (i === 0 && index === lunbotu.children.length - 1)) {
                    item.classList.add('lunbtu-yuan');
                } else {
                    item.classList.remove('lunbtu-yuan');
                }
            });
            // 如果是第二张则换成白色
            if (index === 1) {
                header.classList.add('white');
            } else {
                header.classList.remove('white');
            }
        }

        lunbotu.addEventListener('transitionend', () => {
            // 如果已经是最后一张则挪移到最前方
            if (index === lunbotu.children.length - 1) {
                lunbotu.style.transitionProperty = 'width';
                index = 0;
                lunbo();
                setTimeout(() => {
                    lunbotu.style.transitionProperty = 'transform';
                });
            }
        });

              // 启动自动滑动
        function autoSwipe() {
            timer = setInterval(() => {
                if (++index >= lunbotu.children.length) {
                    index = 0;
                }
                lunbo();
            }, 3000);
        }

        autoSwipe();
                // 给每个点绑定点击事件
                points.forEach((item, i) => {
            item.onclick = function () {
                clearTimeout(timer);
                index = i;
                swipe();
                autoSwipe();
            }
        });
          // 视频播放相关
          videoContainer.forEach(item => {
            const videoImg = item.querySelector('img');
            const videoBox = item.querySelector('.video-box');
            videoImg.onmouseover = () => {
                videoImg.style.opacity = 0;
                videoBox.style.opacity = 1;
            }

            videoImg.onmouseout = () => {
                videoImg.style.opacity = 1;
                videoBox.style.opacity = 0;
            }
        });



        //移动项目相关
        const moveItem = next => {
            const index = swiperContainer.children.length - 3;
            if (next > index || next < 0) {
                return;
            }
            moveButtons[0].classList.remove('disabled');
            moveButtons[1].classList.remove('disabled');
            moveItemIndex = next;
            if (moveItemIndex === index) {
                moveButtons[1].classList.add('disabled');
            } else if (moveItemIndex === 0) {
                moveButtons[0].classList.add('disabled');
            }
            const distance = -moveItemIndex * 444;
            swiperContainer.style.transform = `translateX(${distance}px)`;
        };

        moveButtons[0].onclick = () => {
            moveItem(moveItemIndex - 1);
        }

        moveButtons[1].onclick = () => {
            moveItem(moveItemIndex + 1);
        }

</script>
</html>